import { Button, Space } from '@mao-fu/sun-ui';
import React from 'react';

const App: React.FC = () => (
  <div>
    <div>
      <h4>direction: horizontal, display: flex</h4>
      <div>
        <Space display="flex" justify="start">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space display="flex" justify="end">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space display="flex" justify="center">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space display="flex" justify="between">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space display="flex" justify="around">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space display="flex" justify="evenly">
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
      </div>
    </div>
    <hr></hr>
    <div>
      <h4>direction: vertical, display: flex</h4>
      <div>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="start"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="end"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="center"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="between"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="around"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
        <hr></hr>
        <Space
          style={{ height: 150 }}
          display="flex"
          justify="evenly"
          direction="vertical"
        >
          <Button type="primary">Primary</Button>
          <Button type="primary">Primary</Button>
        </Space>
      </div>
    </div>
  </div>
);

export default App;
